import { Component } from "react";

export default class App extends Component {
  state={
    name:'张三',
    age:18
  }
  changeValue(e:React.ChangeEvent<HTMLInputElement>){
    // dir是详细输出‘
    this.setState({
      [e.target.name]:e.target.value
    })
  }


  render() {
    return <div>
      {/* 受控组件和非受控组件的区别是：值是否由react控制 */}
      <h1>父组件-{this.state.name}-{this.state.age}</h1>
      {/* 写法不美观繁琐 */}
      <input type="text" placeholder="请输入名字" value={this.state.name}
      onChange={(e)=>{ 
        this.setState({
          name:e.target.value
        })
}} />
      <input type="text" placeholder="请输入年龄" value={this.state.age} 
      onChange={(e)=>{ 
        this.setState({
          age:e.target.value
        })
      }}/>

      <hr />
      {/* name是表单提交到服务器，后端通过name取值 */}
      <input type="text" placeholder="请输入名字" name="name" value={this.state.name} onChange={e=>this.changeValue(e)}/>
      <input type="text" placeholder="请输入年龄" name="age" value={this.state.age} onChange={e=>this.changeValue(e)}/>


    </div>
  }
}